import React, { useState, useEffect } from "react";
import "./index.css";
import axios from "axios";

const request = async (url) => {
  const resp = await axios.get(url);
  const data = resp.data;
  return data.data;
};

const useFoods = () => {
  const [category, setCategory] = useState([]);
  const [food, setFood] = useState([]);

  const getFoods = async () => {
    const foods = await request("https://www.xiaozhu.run/api/foods");
    setCategory(foods.categoryList);
    setFood(foods.foodList);
  };

  useEffect(() => {
    getFoods();
  }, []);

  return [category, food];
};



function Foods() {
  const [index, setIndex] = useState(1);
  const [category, food] = useFoods();
  // console.warn(category);
  // console.warn(food);

  return (
    <>
      <div className="order-category-list">
        <ul>
          {category.map((item) => {
            const isCurrent = index === item.id;
            return (
              <li
                key={item.id}
                onClick={() => setIndex(item.id)}
                className={isCurrent ? "active" : ""}
              >
                {item.name}
              </li>
            );
          })}
        </ul>
      </div>
      <div className="order-food-list">
        <div className="order-food-list-group" data-category-id="1">
          <h3>凉菜</h3>
          <ul>
            {food.map((item, index) => {
              if (item.categoryId === 1) {
                return (
                  <li key={index}>
                    <div className="order-food-list-image">
                      <img src={item.image} alt="" />
                    </div>
                    <div className="order-food-list-meta">
                      <h3>{item.name}</h3>
                      <em>￥{item.price}</em>
                    </div>
                    <div className="order-food-list-control">
                      <i>-</i>
                      <b>0</b>
                      <i>+</i>
                    </div>
                  </li>
                );
              }
            })}
          </ul>
        </div>
        <div className="order-food-list-group" data-category-id="2">
          <h3>热菜</h3>
          <ul>
            {food.map((item, index) => {
              if (item.categoryId === 2) {
                return (
                  <li key={index}>
                    <div className="order-food-list-image">
                      <img src={item.image} alt="" />
                    </div>
                    <div className="order-food-list-meta">
                      <h3>{item.name}</h3>
                      <em>￥{item.price}</em>
                    </div>
                    <div className="order-food-list-control">
                      <i>-</i>
                      <b>0</b>
                      <i>+</i>
                    </div>
                  </li>
                );
              }
            })}
          </ul>
        </div>
        <div className="order-food-list-group" data-category-id="3">
          <h3>汤菜</h3>
          <ul>
            {food.map((item, index) => {
              if (item.categoryId === 3) {
                return (
                  <li key={index}>
                    <div className="order-food-list-image">
                      <img src={item.image} alt="" />
                    </div>
                    <div className="order-food-list-meta">
                      <h3>{item.name}</h3>
                      <em>￥{item.price}</em>
                    </div>
                    <div className="order-food-list-control">
                      <i>-</i>
                      <b>0</b>
                      <i>+</i>
                    </div>
                  </li>
                );
              }
            })}
          </ul>
        </div>
        <div className="order-food-list-group" data-category-id="4">
          <h3>主食</h3>
          <ul>
            {food.map((item, index) => {
              if (item.categoryId === 4) {
                return (
                  <li key={index}>
                    <div className="order-food-list-image">
                      <img src={item.image} alt="" />
                    </div>
                    <div className="order-food-list-meta">
                      <h3>{item.name}</h3>
                      <em>￥{item.price}</em>
                    </div>
                    <div className="order-food-list-control">
                      <i>-</i>
                      <b>0</b>
                      <i>+</i>
                    </div>
                  </li>
                );
              }
            })}
          </ul>
        </div>
        <div className="order-food-list-group" data-category-id="5">
          <h3>酒水</h3>
          <ul>
            {food.map((item, index) => {
              if (item.categoryId === 5) {
                return (
                  <li key={index}>
                    <div className="order-food-list-image">
                      <img src={item.image} alt="" />
                    </div>
                    <div className="order-food-list-meta">
                      <h3>{item.name}</h3>
                      <em>￥{item.price}</em>
                    </div>
                    <div className="order-food-list-control">
                      <i>-</i>
                      <b>0</b>
                      <i>+</i>
                    </div>
                  </li>
                );
              }
            })}
          </ul>
        </div>
      </div>
    </>
  );
}

export default Foods;
